<template>
  <div class="app-container">
      
    <el-table v-loading="listLoading" :data="list"  border fit highlight-current-row stripe  style="width: 100%">
      <el-table-column align="center" label="序" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="10%" align="center" label="优惠券信息">
        <template slot-scope="scope">
          <span><bx-image :src="scope.row.imageConvert"  :width="50" :height="50" :show-delete="false"></bx-image> </span>
          <span>满 {{ (scope.row.overPrice/100) }} 元 减  {{(scope.row.couponPrice/100)}}元</span>
        </template>
      </el-table-column>
      <el-table-column  min-width="10%" align="center" label="数量">
        <template slot-scope="scope">
          <span>{{ scope.row.count }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column  min-width="10%" align="center" label="时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column> -->
      
      <el-table-column align="center" label="操作"  min-width="15%">
        <template slot-scope="scope">
            <el-button  type="danger" size="small" style="margin-left:10px;" @click="showCouponWindow(scope.row.id)">
                发放
            </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.rows" @pagination="getList" />

    <el-dialog title="提示" :visible.sync="dialog.visible"  width="300px">
        <span>
            <el-input v-model="dialog.inputvalue" placeholder="请输入发放数量"></el-input>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialog.visible = false">取 消</el-button>
            <el-button type="primary" @click="saveSpokerCoupon()" :loading="dialog.saveloading">确 定</el-button>
        </span>
    </el-dialog>

    
  </div>
</template>

<script>

import { deepClone,parseTime } from '@/utils'
import * as auth from '@/utils/auth'
import * as shopApi from '@/api/shop'
import * as couponApi from '@/api/coupon'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import BxImage from '@/components/BxImage'
import guid from '@/utils/guid'
import * as imageHelper from '@/utils/image'
import QRCode from 'qrcodejs2'

export default {
  name: 'IssueCouponShop',
  components: { Pagination,BxImage },
  data(){
    return{
      userid:'',
      selectRowId:'',
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        rows: 20,
        type:-1,
      },
      search:{
      },
      selectOptions:{
         
      },
      dialog:{
          visible:false,
          inputvalue:'',
          saveloading:false,
      }
      
    }
  },
  created(){
      var that=this;
      that.userid= (that.$route.params && that.$route.params.userid);
      that.getList();
  },
  mounted(){

  },
  methods: {
    getList(){
      var that=this;
      that.listLoading = true;
      couponApi.getCouponListForShop(that.listQuery).then(res=>{
         if(res.data){
            that.list=[...res.data.map((item,index)=>{
              item._id=index+1;
              item.imageConvert=imageHelper.GetFullUrl(item.shopLogo,200,200);
              item.state=1;
              
              return item;
            })];
            that.listLoading = false;
            that.total=res.data.total || 0;
            
         }
      })
    },
    
    searchClick(){
      var that=this;
      that.listQuery.page=1;
      that.getList();
    },
    showCouponWindow(id){
        this.dialog.visible=true;
        this.selectRowId=id;
    },
    saveSpokerCoupon(){
        var that=this;
        that.dialog.saveloading=true;
        var idx=that.list.findIndex(item=>item.id==that.selectRowId);
        if(idx<0){
            that.$message({
                    message: '界面数据异常，请刷新页面后重试.',
                    type: 'warning'
                });
                return;
        }
        if(!that.dialog.inputvalue){
            that.$message({
                    message: '请输入发放优惠券的数量.',
                    type: 'warning'
                });
                return;
        }
        var selectItem=that.list[idx];
        var data={'toUserId':that.userid,'overPrice':selectItem.overPrice,'couponPrice':selectItem.couponPrice,'count':that.dialog.inputvalue};
        couponApi.issuseCouponToSpoker(data).then(res=>{
            if(res.data){
                that.$message({
                    message: '保存成功！',
                    type: 'success'
                });
                
                that.getList();
            }
            that.dialog.saveloading=false;
            that.dialog.visible=false;
        }).catch(()=>{
            that.dialog.saveloading=false;
            that.dialog.visible=false;
        })
    },
  }
}
</script>
